<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form表单的使用</title>
		<script>
			
			// 定义个函数
			function doCheck(){
				// 使用js获取html中控件的 id为 txtName 的标签对象
				var tagName  = document.getElementById("txtName");
				// 获取标签的值
				if(tagName != null){
					var valName = tagName.value;
					// 向浏览器控制台打印（首选的js的debug方式）
					console.info("获取的控件的值："+valName);
					// 可以使用alert弹出框，将信息在联启页面进行弹出显示
					alert("获取的控件的值："+valName);
				}
				
				// 返回false，组织浏览器向服务器发送数据表单
				return false;
			}
			
		</script>
	</head>

	<body>
		<!--from表单时用于向数据库发送数据的载体空间，也就是，只有写在form表单中的控件的值才会被打包发送服务器-->
		<form action="#" method="get">
			<table width="600px" align="center" border="1px" cellpadding="0" cellspacing="0" bordercolor="#E6E6E6">
				<tr align="center">
					<td width="30%">用户名</td>
					<td  width="70%"><input type="text" id="txtName" name="txtName"  /></td>
				</tr>
				<tr align="center">
					<td width="30%">密码</td>
					<td  width="70%"><input type="password" id="txtPsw" name="txtPsw"  /></td>
				</tr>
				<tr align="center">
					<td width="30%">性别</td>
					<!--一组单选框要求所有的单选框的控件的name属性一样---->
					<td  width="70%">女<input type="radio" id="txtSexFemale" name="txtSex" checked="checked" />
									男<input type="radio" id="txtSexMale" name="txtSex"  /></td>
				</tr>
				<tr align="center">
					<td width="30%">专业</td>
					<td  width="70%">
						<select>
							<option value=""></option>
							<option value="cs">计算机</option>
							<option value="fc" selected="selected">金融</option>
							<option value="ec">电信</option>
						</select>
					</td>
				</tr>
				<tr align="center">
					<td width="30%">兴趣</td>
					<!--一组多选框要求所有的多选框的控件的name属性一样---->
					<td  width="70%">游戏<input type="checkbox" id="txtHobby1" name="txtHobby" />
									足球<input type="checkbox" id="txtHobby2" name="txtHobby"  />
									驴友<input type="checkbox" id="txtHobby3" name="txtHobby"  />
					</td>
				</tr>
				<tr align="center">
					<td width="30%">自我介绍</td>
					<td  width="70%">
						<textarea rows="10" cols="30" maxlength="300" id="txtbio" name="txtbio" >
							这里写个人介绍。。。
						</textarea>
					</td>
				</tr>
				<tr align="center">
					<td width="30%">头像</td>
					<td  width="70%"><input type="file"  id="txtImg" name="txtImg" /></td>
				</tr>
				<tr align="center">
					<td colspan="2" align="center">
						<input type="submit" value="提交" onclick="return doCheck();" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>
			
		</form>
	</body>

</html>